<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <span>颐养中心</span>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <MyMenu></MyMenu>
        </el-aside>
        <el-container>
          <el-main>
            <routerView></routerView>
          </el-main>
          <el-footer>Footer</el-footer>
      </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import MyMenu from "@/components/MyMenu.vue";
import {RouterView} from "vue-router";

export default {
  components: {
    MyMenu,
  }
}
</script>

<style scoped>
.common-layout {
  height: 100%;
  width: 100%;
}

.el-container {
  height: 100%;
  width: 100%;
}
.el-aside{
  background-color: aliceblue;
}
.el-header,.el-footer{
  background-color: plum;
  /*弹性布局*/
  display: flex;
  /*改变布局方向
  flex-direction: column;*/
  justify-content: center;
  align-items: center;
}
</style>